<style lang="less" scope>
  
  @import "../assets/css/config.less";
  .message_box{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 130;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1210px;
    .message{
      height: 160px;
      width: 500px;
      background-color: #fff;
      border-radius: 8px;
      text-align: left;
      display: flex;
      flex-direction: column;
      .message_header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        .message_icon:hover{
          color: @color1;
          cursor: pointer;
        }
      }
      .message_h2 {
        font-size: 1.125rem;
      }
      .message_body{
        flex: 1;
        padding: 0 30px;
        font-size: 16px;
      }
      .message_foot{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 60px;
        .message_cancel{
          height: 32px;
          width: 60px;
          outline: none;
          border: 1px solid @color1;
          background-color: @color6;
          color: @color1;
          border-radius: 4px;
          cursor: pointer;
          &:hover{
            border: 1px solid @color1;
            background-color: @color2;
            color: @white;
          }
          &:active{
            border: 1px solid @color1;
            background-color: @color3;
            color: @white;
          }
        }
        .message_confirm{
          height: 32px;
          width: 60px;
          margin: 0 15px;
          outline: none;
          border: 1px solid @color1;
          background-color: @color1;
          color: @white;
          border-radius: 4px;
          cursor: pointer;
          &:hover{
            border: 1px solid @color1;
            background-color: @color2;
          }
          &:active{
            border: 1px solid @color1;
            background-color: @color3;
          }
        }
      }
    }
  }
</style>

<template>
  <div class="message_box" :style="!masker?'background-color: rgba(0, 0, 0, 0)':''">
    <div class="message">
      <div class="message_header">
        <h2 class="message_h2">{{options.title}}</h2>
        <icon size="16" class="el-icon-close message_icon" @click="cancel"/>
      </div>
      <div class="message_body">
        {{options.content}}
      </div>
      <div class="message_foot">
        <button class="message_cancel" @click="cancel">{{options.cancel}}</button>
        <button class="message_confirm" @click="confirm">{{options.confirm}}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'messageBox',
  data() {
    return {

    }
  },
  props: {
    options: Object,
    masker: {
      default: true
    }
  },
  methods: {
    cancel(){
      this.$emit('cancel');
    },
    confirm(){
      this.$emit('confirm');
    }
  }
}
</script>